<style type="text/css">
.sm-st {
    background: #fff;
    padding: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}

.sm-st-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background: #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
    color: #fff;
}

.sm-st-info {
    font-size: 12px;
    padding-top: 2px;
}

.sm-st-info span {
    display: block;
    font-size: 24px;
    font-weight: 600;
}

.orange {
    background: #fa8564 !important;
}

.tar {
    background: #45cf95 !important;
}

.sm-st .green {
    background: #86ba41 !important;
}

.pink {
    background: #AC75F0 !important;
}

.yellow-b {
    background: #fdd752 !important;
}

.stat-elem {

    background-color: #fff;
    padding: 18px;
    border-radius: 40px;

}

.stat-info {
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    margin-top: -5px;
    padding: 8px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    font-style: italic;
}

.stat-icon {
    text-align: center;
    margin-bottom: 5px;
}

.st-red {
    background-color: #F05050;
}

.st-green {
    background-color: #27C24C;
}

.st-violet {
    background-color: #7266ba;
}

.st-blue {
    background-color: #23b7e5;
}

.stats .stat-icon {
    color: #28bb9c;
    display: inline-block;
    font-size: 22px;
    text-align: left;
    vertical-align: middle;
    width: 35px;
    float: left;
}

.stat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.stat .value {
    font-size: 20px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.stat .value .badge {
    color: #fff;
    font-size: 50%;
    background: #e74c3c;
    min-width: 5px;
    font-weight: normal;
    padding: 2px 3px;
}
.stat .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat.lg .value {
    font-size: 26px;
    line-height: 28px;
}

.stat.lg .name {
    font-size: 16px;
}

.stat-col .progress {
    height: 2px;
}

.stat-col .progress-bar {
    line-height: 2px;
    height: 2px;
}

.item {
    padding: 30px 0;
}



#statistics .panel {
    min-height: 150px;
}

#statistics .panel h5 {
    font-size: 13px;
}

.form-control {
    width: 95%;
}

.small-box .sum_price {
    font-size: 30px;
    font-weight: bold;
}

.small-box .icon {
    font-size: 70px;
    transition: all 0.3s linear 0s;
}

.small-box:hover .icon {
    font-size: 75px;
}

.small-box {
    margin-bottom: 0px;
}
.small-box > .inner {
    padding: 5px;
}
.small-box p {margin: 0 0 3.0px;}
</style>
<form id="reserve-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="pms/pmsroomstatus/reserve">
    <input type="hidden" id="c-room_type_id" name="row[room_type_id]" value="{$roomModel['room_type_id']}">
    <input type="hidden" id="c-room_info_id" name="row[room_info_id]" value="{$roomModel['room_info_id']}">
    <input type="hidden" id="c-total_price" name="row[total_price]" value="">
    <input type="hidden" id="c-price_json" name="row[price_json]" value="">
    <div class="row">
        <div class="col-xs-4">
            <!-- small box -->
            <div class="small-box bg-aqua" id="todayBox">
                <div class="inner">
                    <div class="sum_price">&yen;<span>-<span></div>
                    <p>房费总计</p>
                </div>
                <div class="icon">
                    <i class="fa fa-bed"></i>
                </div>
                <span class="small-box-footer">
                    {$roomModel['floor']}楼{$roomModel['room_no']}房【{$roomModel['name']}】
                </span>
            </div>
        </div>
        <div class="col-xs-8">
            <div class="card sameheight-item stats">
                <div class="card-block" style="overflow-y: auto;height:110px;">
                    <div id="priceBox" class="row row-sm stats-container" style="width:100%;">
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="panel-body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" id="tab" style="margin-bottom:10px;">
                <li role="presentation" class="active"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">直接入住</a></li>
                <li role="presentation"><a href="#customer" aria-controls="customer" role="tab" data-toggle="tab">同住客人</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="info">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>渠道来源:</label>
                            <select id="c-source" name="row[source]" class="form-control">
                                {volist name="sourceList" id="item"}
                                <option value="{$item['name']}">{$item['name']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>联系人姓名:</label>
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="c-sex" name="row[sex]" style="width:60px;">
                                        <option value="1">先生</option>
                                        <option value="0">女士</option>
                                    </select>
                                </div>
                                <input class="form-control" type="text" id="c-realname" name="row[realname]" style="width:93%;">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>证件号码:</label>
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="c-certificates_type" name="row[certificates_type]" style="width:80px;">
                                        {volist name="certificatestypeList" id="item"}
                                        <option value="{$item['id']}">{$item['name']}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <input type="text" id="c-person_no" name="row[person_no]" class="form-control" required="required" style="width:91%;">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>出生日期:</label>
                            <div class="input-group" style="width:95%;">
                                <input type="text" id="c-birthday" name="row[birthday]" class="form-control datetimepicker" data-date-format="YYYY-MM-DD">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" class="btn btn-info" id="js_getBirthday"><i class="fa fa-eye"></i> {:__('取身份证')}</button></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>民族:</label>
                            <select id="c-nation" name="row[nation]" class="form-control">
                                <option value="">请选择</option>
                                {volist name="nationList" id="item"}
                                <option value="{$item['id']}">{$item['name']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>联系电话:</label>
                            <input type="text" id="c-tel" name="row[tel]" class="form-control" required="required">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>附件:</label>
                            <div class="input-group">
                                <input id="c-addons" class="form-control" size="50" name="row[addons]" type="text" readonly="readonly">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="plupload-addons" class="btn btn-danger plupload" data-input-id="c-addons" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-addons"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                </div>
                            </div>
                            <ul class="row list-inline plupload-preview" id="p-addons"></ul>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>入住时间:</label>
                            {if $start_date}
                            <input type="text" id="c-check_in_time" name="row[check_in_time]" class="form-control datetimepicker" data-date-default-date="{$start_date}" readonly="readonly">
                            {else}
                            <input type="text" id="c-check_in_time" name="row[check_in_time]" class="form-control datetimepicker" data-date-min-date="{:date('Y-m-d H:i:s')}" data-date-default-date="{:date('Y-m-d H:i:s')}">
                            {/if}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>退房时间:</label>
                            {if $end_date}
                            <input type="text" id="c-check_out_time" name="row[check_out_time]" class="form-control datetimepicker" value="{$end_date}" readonly="readonly">
                            {else}
                            <input type="text" id="c-check_out_time" name="row[check_out_time]" class="form-control datetimepicker" data-date-min-date="{:date('Y-m-d', strtotime('+1 day'))} 00:00:00" value="{:date('Y-m-d', strtotime('+1 day'))} 14:00:00">
                            {/if}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>住宿天数(夜):</label>
                            <input type="number" id="c-days" name="row[days]" class="form-control" value="1" readonly="readonly">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>备注:</label>
                            <textarea id="c-remarks" name="row[remarks]" class="form-control" style="width:100%;"></textarea>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="customer">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-success" id="js_MAdd" title=" {:__('添加同住客人')}"><i class="fa fa-plus"></i> {:__('添加同住客人')}</a>
                    </div>
                    <table id="customer_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    </table>
                    <input type="hidden" id="c-customer_data" name="row[customer_data]">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <!-- <label class="control-label col-xs-12 col-sm-2"></label> -->
        <div class="col-xs-12 col-sm-12 text-center">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<!-- Modal -->
<form id="customer-form" class="form-horizontal" role="customerform" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="m-index">
    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="customerModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改客人信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">入住人姓名:</label>
                        <div class="col-xs-12 col-sm-8">
                            <!-- <input id="m-realname" class="form-control" type="text" value=""> -->
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="m-sex" style="width:60px;">
                                        <option value="1">先生</option>
                                        <option value="0">女士</option>
                                    </select>
                                </div>
                                <input class="form-control" type="text" id="m-realname" style="width:94%;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">证件号码:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="m-certificates_type" style="width:80px;">
                                        {volist name="certificatestypeList" id="item"}
                                        <option value="{$item['id']}">{$item['name']}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <input type="text" id="m-person_no" class="form-control" required="required" style="width:91%;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">出生日期:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group" style="width:95%;">
                                <input type="text" id="m-birthday" class="form-control datetimepicker" data-date-format="YYYY-MM-DD">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" class="btn btn-info" id="js_getMBirthday"><i class="fa fa-eye"></i> {:__('取身份证')}</button></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">联系电话:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="m-tel" class="form-control" type="text" value="">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="js_MSubmit">确定保存</button>
                </div>
            </div>
        </div>
    </div>
</form>